import React from 'react';
import {PageHeader, Tabs} from 'antd';
import isEmpty from 'lodash-es/isEmpty';
import map from 'lodash-es/map';
import isFunction from 'lodash-es/isFunction';
import {isString} from 'lodash-es';
import BaseComp from '../Base/BaseComp'

const {TabPane} = Tabs;

// export interface PageHeaderCompProps {
//   /**
//    * ReactNode 自定义标题文字
//    * */
//   title? : string | any;
//   /**
//    * ReactNode 操作区，位于 title 行的行尾
//    * */
//   action? ;
//   /**
//    * ReactNode 面包屑的配置
//    * */
//   breadcrumbList?;
//   /**
//    * Array Table组件 底部 Tabbar
//    * */
//   tabList ?: Array<any>;
//   /**
//    * ReactNode Table组件 底部 Tabbar回调
//    * */
//   onTabChange?;
//   /**
//    * string 初始化选中面板的 key
//    * */
//   tabDefaultActiveKey?: string;
//   /**
//    * string  当前激活 tab 面板的 key
//    * */
//   tabActiveKey?: string;
//   /**
//    * Function 组件的实例化
//    * */
//   onRef? ;
//   style?: object | any;
// }

export default class PageHeaderComp extends BaseComp {

    selfRef = null; // 自己的 ref

    componentDidMount() {
        this.props.onRef && this.props.onRef(this);
    }

    /**
     * 获取组件的尺寸(px)
     * @returns {{}|{offsetHeight: *, offsetWidth: *}}
     */
    getCompOffset() {
        if (this.selfRef) {
            return {
                offsetWidth: this.selfRef.offsetWidth,
                offsetHeight: this.selfRef.offsetHeight,
            };
        } else {
            return {};
        }
    }

    mainRender(context) {

        const {title, action, breadcrumbList, tabList, onTabChange, tabDefaultActiveKey, tabActiveKey, onRef, ...restProps} = this.props;

        const {localeUtils} = this.helpers
        const customProps = {
            title,
            extra: action,
        };
        // 面包屑
        if (!isEmpty(breadcrumbList)) {
            let breadcrumb = {};
            breadcrumb.routes = map(breadcrumbList, (bItem, bInd) => ({
                breadcrumbName: localeUtils ? localeUtils.formatMsgByCn(bItem.title) : bItem.title,
                path: '',
            }));
            breadcrumb.itemRender = (route, params, routes, paths) => (
                <span>{route.breadcrumbName}</span>
            );
            customProps.breadcrumb = breadcrumb;
        }
        // 如果 title 是字符串，做国际化
        if (isString(title)) {
            customProps.title = localeUtils ? localeUtils.formatMsgByCn(title) : title;
        }

        // 底部 Tabbar
        if (!isEmpty(tabList)) {
            let tabsProps = {};

            if (null !== tabActiveKey && 'undefined' !== typeof tabActiveKey) {
                tabsProps.activeKey = tabActiveKey;
            } else if (null !== tabDefaultActiveKey && 'undefined' !== typeof tabDefaultActiveKey) {
                tabsProps.defaultActiveKey = tabDefaultActiveKey;
            } else if (tabList[0].key) {
                tabsProps.defaultActiveKey = tabList[0].key;
            }

            if (isFunction(onTabChange)) {
                tabsProps.onChange = onTabChange;
            }

            customProps.footer = (
                <Tabs {...tabsProps}>
                    {
                        map(tabList, (tItem) => (
                            <TabPane tab={tItem.tab} key={tItem.key}/>
                        ))
                    }
                </Tabs>
            );

        }

        return (
            <div ref={node => (this.selfRef = node)}>
                <PageHeader
                    {...restProps}
                    {...customProps}
                />
            </div>
        );
    }

}
